<template>
    <el-row class="tac">
      <el-col :span="40">
        <h5 class="mb-2">Default colors</h5>
        <el-menu default-active="2" class="el-menu-vertical-demo">
          <el-sub-menu index="0">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>个人中心</span>
            </template>
            <el-menu-item index="0-1" @click="goToEditUser">修改个人信息</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>购物车</span>
            </template>
            <el-menu-item index="1-1" @click="goToCartQuery">我的购物车</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>订单</span>
            </template>
            <el-menu-item index="2-1" @click="goToOrdersQuery">我的订单</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>地址</span>
            </template>
            <el-menu-item index="3-1" @click="goToAddressManage">我的地址</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-col>
    </el-row>
  </template>
    
    
  <script lang="ts" setup>
  import { useRouter } from "vue-router";
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
  } from '@element-plus/icons-vue'
  import { useStore } from 'vuex'
import store from "@/store";
  
  const router = useRouter()
  
  function goToCartQuery() {
    router.push("/cartquery")
  }
  
  function goToAddressManage() {
    router.push("/addressmanage")
  }

  function goToEditUser() {
    router.push({
        name: 'edituserself', params: {
            id: (store.state as any).user.userInfo.id,
            userName: (store.state as any).user.userInfo.userName,
            userPwd: (store.state as any).user.userInfo.userPwd,
            avatar: (store.state as any).user.userInfo.avatar,
            telephone: (store.state as any).user.userInfo.telephone,
            mail: (store.state as any).user.userInfo.mail,
            gender: (store.state as any).user.userInfo.gender
        }
    })
  }

  function goToOrdersQuery() {
    router.push({
        name: 'ordersquery', params: {
            userId: (store.state as any).user.userInfo.id
        }
    })
  }

  </script>